<template>
    <el-select
      :modelValue="modelValue"
      @update:modelValue="(val) => $emit('update:modelValue', val)"
      v-bind="$attrs"
      @change="handleChange"
      @visible-change="handleVisibleChange"
      @remove-tag="handleRemoveTag"
      @clear="handleClear"
      @blur="handleBlur"
      @focus="handleFocus"
    >
      <el-option
        v-for="item in options"
        :key="item.value"
        :label="item.label"
        :value="item.value"
        :disabled="item.disabled"
      ></el-option>
      <template v-if="$slots.empty" #empty>
        <slot name="empty"></slot>
      </template>
      <template v-if="$slots.prefix" #prefix>
        <slot name="prefix"></slot>
      </template>
    </el-select>
  </template>
  
  <script lang="ts" setup>
  import { FormItemOption } from '../types';
  
  /**
   * FormSelect 组件 props 定义
   */
  const props = defineProps<{
    modelValue: string | number | boolean | Array<string | number | boolean>;
    options: FormItemOption[];
    multiple?: boolean;
    filterable?: boolean;
    remote?: boolean;
    remoteMethod?: (query: string) => void;
    loading?: boolean;
  }>();
  
  /**
   * FormSelect 组件 emit 定义
   */
  const emit = defineEmits<{
    (e: 'update:modelValue', value: any): void;
    (e: 'change', value: any): void;
    (e: 'visible-change', visible: boolean): void;
    (e: 'remove-tag', value: any): void;
    (e: 'clear'): void;
    (e: 'blur', event: FocusEvent): void;
    (e: 'focus', event: FocusEvent): void;
  }>();
  
  // 处理选择变更
  const handleChange = (value: any) => {
    emit('change', value);
  };
  
  // 处理下拉框可见性变更
  const handleVisibleChange = (visible: boolean) => {
    emit('visible-change', visible);
  };
  
  // 处理移除标签
  const handleRemoveTag = (value: any) => {
    emit('remove-tag', value);
  };
  
  // 处理清除
  const handleClear = () => {
    emit('clear');
  };
  
  // 处理失去焦点事件
  const handleBlur = (event: FocusEvent) => {
    emit('blur', event);
  };
  
  // 处理获取焦点事件
  const handleFocus = (event: FocusEvent) => {
    emit('focus', event);
  };
  </script>